<template>
  <div class="recent">
    <div class="day hover-style" 
      v-for="(item, index) in recentDays" :key="item.id"
      @click="pickRecentDay(index, item)"
      :class="activeRecentIndex == index ? 'active' : ''"
      >
      {{item.dayName}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recentDays: {
      type: Array,
      default: function() {
        return  [
          {
            id: 1,
            dayName: '今天',
            parameter: 0
          },
          {
            id: 2,
            dayName: '昨天',
            parameter: 1
          },
          {
            id: 3,
            dayName: '近3天',
            parameter: 3
          },
          {
            id: 4,
            dayName: '近5天',
            parameter: 5
          }
        ]
      }
    },
  },
  data() {
    return {
      activeRecentIndex: 0
    }
  },
  methods: {
    pickRecentDay(index, item) {
      this.activeRecentIndex = index
      this.$emit('click', item)
    }
  }
}
</script>

<style lang="stylus">
@import '~@/assets/styles/variables.styl'
  .recent 
    display flex 
    @media screen and (max-width 750px) 
      justify-content center
    .day 
      padding 0 10px
      font-size 15px 
      font-weight 700
      @media screen and (max-width 750px) 
        font-size 14px 
        font-weight normal
        
      &.active 
        color $color-theme-red 
</style>